<template>
  <!-- 催收执行页-客户信息模块 -->
  <section class="component customer-information panel">
    <el-tabs v-model="activeName">
      <el-tab-pane
        :key="item.name"
        :label="item.label"
        :name="item.name"
        v-for="item of tabs"
      ></el-tab-pane>
    </el-tabs>
    <keep-alive>
      <component
        :is="activeName"
        class="customer-information-box"
        :model="model"
      ></component>
    </keep-alive>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Prop } from "vue-property-decorator";
import { components, tabs } from "./customer-information/";
import { namespace } from "vuex-class";
const CollectionExecutionModule = namespace("collection-execution");
import { Dependencies } from "~/core/decorator";

@Component({
  components: {
    ...components
  }
})
export default class CustomerInformation extends Vue {
  @CollectionExecutionModule.State private customerInformationActiveName;
  @CollectionExecutionModule.Mutation private updatecustomerInformationActive;
  @CollectionExecutionModule.State private personalType;
  @Prop() private model;
  /**
   * 历史数据查询tabs
   */
  private get tabs() {
    return tabs.filter(v => v.type === this.personalType);
  }

  private get activeName() {
    return this.customerInformationActiveName;
  }

  private set activeName(val) {
    this.updatecustomerInformationActive(val);
  }
}
</script>

<style lang="less">
.component.customer-information {
  margin-bottom: 5px;
  margin-top: 4px;
  padding: 0px 10px 0px 10px;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .el-tabs {
    .el-tabs__header {
      .el-tabs__nav-wrap {
        width: 100%;
      }
    }
  }
  .customer-information-box {
    height: 148px;
    overflow-y: auto;
  }
}
</style>
